<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="90px">
      <el-form-item label="商品名称" prop="subject">
        <el-input v-model="form.subject" style="width: 35%"/>
      </el-form-item>
      <el-form-item label="商品价格" prop="totalAmount">
        <el-input v-model="form.totalAmount" style="width: 35%"/>
      </el-form-item>
      <el-form-item label="商品描述" prop="body">
        <el-input v-model="form.body" style="width: 35%" rows="8" type="textarea"/>
      </el-form-item>
      <el-form-item label="">
        <el-button :loading="loading" size="small" type="primary" @click="doSubmit">去支付</el-button>
        <el-button size="small" type="success" @click="openConfig">修改配置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog v-dialogDrag :title="title" :close-on-click-modal="false" v-if="open" :visible.sync="open" width="1000px"
               append-to-body>
      <el-form ref="formConfig" :model="formConfig" :rules="rulesConfig" style="margin-top: 6px;" size="small"
               label-width="100px">
        <el-form-item label="appID" prop="appId">
          <el-input v-model="formConfig.appId"/>
          <span style="color: #C0C0C0;margin-left: 10px;">应用APPID,收款账号既是APPID对应支付宝账号</span>
        </el-form-item>
        <el-form-item label="商家账号" prop="sysServiceProviderId">
          <el-input v-model="formConfig.sysServiceProviderId"/>
          <span style="color: #C0C0C0;margin-left: 10px;">商家账号</span>
        </el-form-item>
        <el-form-item label="商户私钥" prop="privateKey">
          <el-input v-model="formConfig.privateKey" type="password"/>
          <span style="color: #C0C0C0;margin-left: 10px;">商户私钥，你的PKCS8格式RSA2私钥</span>
        </el-form-item>
        <el-form-item label="支付宝公钥" prop="publicKey">
          <el-input v-model="formConfig.publicKey" type="password"/>
          <span style="color: #C0C0C0;margin-left: 10px;">支付宝公钥</span>
        </el-form-item>
        <el-form-item label="回调地址" prop="returnUrl">
          <el-input v-model="formConfig.returnUrl" />
          <span style="color: #C0C0C0;margin-left: 10px;">订单完成后返回的地址</span>
        </el-form-item>
        <el-form-item label="异步通知" prop="notifyUrl">
          <el-input v-model="formConfig.notifyUrl" />
          <span style="color: #C0C0C0;margin-left: 10px;">支付结果异步通知地址</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="saveSubmit">保存配置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {toAliPay,get,update} from '@/api/pay/alipay'

  export default {
    data() {
      return {
        title: '修改配置',
        // 是否显示弹出层
        open: false,
        url: '',
        // 新窗口的引用
        newWin: null,
        loading: false, form: {subject: '', totalAmount: '', body: ''},
        rules: {
          subject: [
            {required: true, message: '商品名称不能为空', trigger: 'blur'}
          ],
          totalAmount: [
            {required: true, message: '商品价格不能为空', trigger: 'blur'}
          ],
          body: [
            {required: true, message: '商品描述不能为空', trigger: 'blur'}
          ]
        },
        formConfig: {configId:'1',appId: '', sysServiceProviderId: '', privateKey: '', publicKey: '', returnUrl: '', notifyUrl: ''},
        rulesConfig: {
          appId: [
            {required: true, message: '请输入appID', trigger: 'blur'}
          ],
          sysServiceProviderId: [
            {required: true, message: '请输入商家账号', trigger: 'blur'}
          ],
          privateKey: [
            {required: true, message: '商户私钥不能为空', trigger: 'blur'}
          ],
          publicKey: [
            {required: true, message: '支付宝公钥不能为空', trigger: 'blur'}
          ],
          returnUrl: [
            {required: true, message: '回调地址不能为空', trigger: 'blur'}
          ],
          notifyUrl: [
            {required: true, message: '回调地址不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    watch: {
      url(newVal, oldVal) {
        if (newVal && this.newWin) {
          this.newWin.sessionStorage.clear()
          this.newWin.location.href = newVal
          // 重定向后把url和newWin重置
          this.url = ''
          this.newWin = null
        }
      }
    },
    methods: {
      //保存配置
      saveSubmit(){
        this.$refs["formConfig"].validate(valid => {
          if (valid) {
            update(this.formConfig).then(res => {

              this.msgSuccess("保存成功");
              this.open=false
            }).catch(err => {
              this.open=false
            })
          }
        })
      },
      openConfig() {
        this.open = true;
        get().then(res => {
          if(res.code==200){
            this.formConfig=res.data;
          }
        }).catch(err => {
          console.log(err.response.data.message)
        })
      },
      //支付
      doSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true
            // 先打开一个空的新窗口，再请求
            this.newWin = window.open()
            let url = ''
            if (/(Android)/i.test(navigator.userAgent)) { // 判断是否为Android手机
              url = 'aliPay/toPayAsWeb'
            } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断是否为苹果手机
              url = 'aliPay/toPayAsWeb'
            } else {
              url = 'aliPay/toPayAsPC'
            }
            toAliPay(url, this.form).then(res => {
              this.loading = false
              console.log(res)
              this.url = res.data
            }).catch(err => {
              this.loading = false
              console.log(err.response.data.message)
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
</style>
